<template>
	<view>
		<u-popup :show="showgGroupPurchase" @close="closeGroupPurchase" safeAreaInsetBottom="true" round="10">
			<view style="max-height: 470px; overflow-y: auto;">
				
				<view class="dflex jcsb aic wrap_nb">					
					<view  :data-shopid="merchant_id" @click="openShop">
						<text class="f18 fbold">{{ merchant_name }}</text>
						<view class="mt5 dflex f12 text_tag">
							<text>{{ goods_category }}</text>
						</view>
					</view>					
					<view class="dflex f14 main_bg p6 radius5 aic" :data-shopid="merchant_id" @click="openShop">
						<u-icon name="home" color="#333" size="20"></u-icon>
						<text class="ml5">逛一逛</text>
					</view>					
				</view>
				
				<view class="wrap_nb">
					<u-line></u-line>
				</view>
				
				<view class="dflex jcsb wrap_nb aic">
					<view class="cflex">
						<text class="f14 u-line-1">{{ location_detail }}</text>
						<text class="f12 ca3a3a3 mt5">{{ distanceText }}</text>
					</view>
					<view class="dflex">
						<view class="cflex aic mr10" @click="openSonLocation">
							<image src="@/static/dh.png" mode="" class="w30"></image>
							<text class="f14 mt5">导航</text>
						</view>
						<view class="cflex aic ml10" @click="makePhoneCall">
							<image src="@/static/phone.png" mode="" class="w30"></image>
							<text class="f14 mt5">电话</text>
						</view>
					</view>
				</view>
				
				<view class="mt12" v-if="goods_list != ''">
					<u-gap height="5" bgColor="#eee"></u-gap>
				</view>
				
				<view class="wrap" v-if="goods_list != ''">
					<view class="dflex jcsb">
						<text class="f16 fbold">优惠团购</text>
						<text class="f12 ca3a3a3">更多..</text>
					</view>
					
					<!-- box -->
					<view class="dflex jcsb mt12" v-for="(item, index) in goods_list" :key="index">
						<image :src="JSON.parse(item.merchant_pics)[0]" mode="aspectFill" :data-goodsid="item.id" class="w105 radius15" @click="openDetail"></image>
						<view class="cflex fg1" style="align-content: space-between;" :data-goodsid="item.id" @click="openDetail">
							<text class="f16 u-line-1 ml10">{{ item.merchant_goods_title }}</text>
							<view class="dflex ml10 aic mt5">
								<text class="p3 main_bg f10 mr5 radius5">官方</text>
								<text class="p3 border_ccc f10 mr5 radius5 ca3a3a3">周末节假日通用</text>
								<text class="p3 border_ccc f10 radius5 ca3a3a3">随时退 · 过期退</text>
							</view>
							<view class="dflex jcsb ml10 mt12">
								<text class="f12 ca3a3a3" style="align-self: flex-end;">已售{{ item.sell_count < item.fake_sell_count ? item.fake_sell_count : item.sell_count }}</text>
								<view class="dflex">
									<view class="cflex">
										<view>												
											<text class="f12">￥{{ item. merchant_goods_total_price}}</text>
											<text class="f12 main_price_color">￥</text>
											<text class="f16 fbold main_price_color">{{ item.merchant_goods_sell_price }}</text>
										</view>
										<view class="dflex jcfe">
											<view class="dflex aic main_price_bg p3 radius5 jcc">
												<image src="@/static/label.png" class="w10" mode=""></image>
												<text class="f10 main_price_color ml5">{{ ((item.merchant_goods_sell_price / item.merchant_goods_total_price) * 10).toFixed(1) }}折热销中</text>
											</view>
										</view>
									</view>					
									<view class="dflex f14 main_bg ptb6 plr20 radius5 aic ml5" @click="openDetail" :data-goodsid="item.id" :data-topicid="item.id">
										<text class="ml5">抢购</text>
									</view>	
								</view>
							</view>
						</view>
					</view>
					<!-- box -->
					
					<u-divider text="分割线" :dot="true"></u-divider>
					
				</view>
				
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	
	
	export default {
		name:"groupPurchase",
		props:{
			merchant_id: '',
			shop_pic:'',
			distanceText : "",
			share_id : '',
			share_type : ''
		},
		data() {
			return {
				showgGroupPurchase : false,
				goods_list: [],
				merchant_name: '',
				merchant_phone: '',
				latitude: '',
				longitude: '',
				location_name: '',
				location_detail: '',
				goods_category: ''
			};
		},
		methods : {
			openGroupPurchase() {
				this.getgoods();
			},
			closeGroupPurchase() {
				this.showgGroupPurchase = false;
			},
			openDetail(e) {
				var gid = e.currentTarget.dataset.goodsid;
				// console.log(this.share_type)
				uni.navigateTo({
					url:"/packageShop/shop/detail?gid=" + gid + "&tid=" + this.share_id + "&stype=" + this.share_type 
				})
			},
			openShop(e) {				
				var mid = e.currentTarget.dataset.shopid;
				uni.navigateTo({
					url:"/packageShop/shop/shop?mid=" + mid
				})
			},				
			openSonLocation(){
				uni.openLocation({
					latitude: Number(this.latitude),
					longitude: Number(this.longitude),
					success: (res) => {
						// console.log(res)
					}
				})
			},
			getgoods() {
				// console.log(this.keyword)				
				uni.showLoading({
					title: "加载中..."
				})
				uni.request({
					url: uni.getStorageSync('domain') + '/api/v1/merchant/get_goods_in_topic',
					
					method: 'POST',
					data : {
						'merchant_id' : this.merchant_id
					},
					success: res => {
						
						// console.log(res)
						
						this.goods_list = res.data.goods
									
						this.merchant_name = res.data.ident_info.company_name
						this.merchant_phone = res.data.ident_info.contact_tel
						this.latitude = res.data.ident_info.latitude
						this.longitude = res.data.ident_info.longitude
						this.location_name = res.data.ident_info.location_name
						this.location_detail = res.data.ident_info.location_detail
						this.goods_category = res.data.ident_info.goods_category
						
						this.empty = false
						
						if (this.goods_list.length == 0) {
							this.empty = true
						}
						
						this.showgGroupPurchase = true;
						
						uni.hideLoading()
					},
					fail: res => {
					},
					complete: res => {
						if (res.data.message == 'Unauthenticated.') {
							uni.navigateTo({
								url: '/pages/member/member'
							})
						}
					}
				});
			},
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber:this.merchant_phone,
					success() {
						uni.showToast({
							title:'号码接通中...',
							icon:'none'
						})
					},
					fail(err) {
						// console.log(err)
						uni.showToast({
							title:'拨打电话失败',
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color : #fff;
	}
</style>